<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理</title>
  <link rel="stylesheet" href="http://42.192.127.112/assets/css/global.css">
  <link rel="stylesheet" href="./public/css/user.css"></link>
</head>
<body>
  <h1>用户管理</h1>
  <form action="">
    <input type="text" hidden value="{{userCount}}" name="userCount">
    <input type="text" hidden value="{{limit}}" name="limit">
    <input type="text" hidden value="{{page}}" name="page">
    <div class="user-box-head flex">
      <div class="nickname-head">Nickname</div>
      <div class="password-head">Password</div>
      <div class="operation-head">Operation</div>
      <div class="add-active-btn">Add + </div>
    </div>
    <div class="window-pop-up" style="display: none;">
      <input placeholder="nickname" type="text" name="nickname" value="" id="nickname">
      <input placeholder="password" type="text" name="password" value="" id="password">
      <button type="button" class="add-btn">Add</button>
    </div>
    {% for user in users %}
    <div class="user-box flex">
      <input type="text" name="nickname" value="{{ user.nickname }}">
      <input type="text" name="password" value="{{ user.password }}">
      <div class="operation"  data-user-id="{{user.id}}">
        <button type="button" class="inter-user">
          <a href="./user_booklet?user_id={{ user.id }}">查看书籍</a>
        </button>
        <button type="button" class="edit-btn">确认修改</button>
        {% if user.status == '1' %}
        <button type="button" class="lock-btn">锁定用户</button>
        {% else %}
        <button type="button" class="unlock-btn">解锁用户</button>
        {% endif %}
      </div>
    </div>
    {% else %}
      <li>This would display if the 'item' collection were empty</li>
    {% endfor %}
  </form>
  <div class="page-nav flex">
    <a class="nav-item" href="./user?page="></a>
  </div>
</body>
<script src="./public/js/my-plugin.js"></script>
<script src="./public/js/user.js"></script>
</html>

